<template>
  <div>
    <div>
      <div class="table-page-search-wrapper">
        <div class="knowledge-search">
          <a-form layout="inline">
            <a-row :gutter="24">
              <template>
                <a-col :md="9" :sm="12" style="float: left;overflow: hidden;">
                  <el-select
                    v-model="value"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    size="small"
                    style="width: 100%"
                  >
                    <el-option v-for="item in options" :key="item.value" :value="item.value"></el-option>
                  </el-select>
                </a-col>
                <a-button type="primary" icon="search" @click="searchOne()">查询</a-button>
              </template>
            </a-row>
          </a-form>
        </div>
        <a-form layout="inline">
          <a-row :gutter="24">
            <template>
              <a-col :md="17" :sm="20" style="float: left;overflow: hidden;">
                <div class="knowledge-details">
                  <a-form layout="inline">
                    <a-row :gutter="24">
                      <template>
                        <a-col :md="3" :sm="4" style="float: left;overflow: hidden;">
                          <p>科室</p>
                        </a-col>
                        <a-col :md="21" :sm="20" class="knowledge-details-name">
                          <a-row
                            :gutter="24"
                            class="knowledge-details-name-frist knowledge-details-name-line"
                          >
                            <a-col
                              :md="3"
                              :sm="4"
                              v-for="(user,index ) in dataSource"
                              :key="user"
                              @click="forSearch(user.depName,index)"
                            >
                              <li :class="{red:i == index}">{{user.depName}}</li>
                            </a-col>
                          </a-row>
                        </a-col>
                      </template>
                    </a-row>
                  </a-form>
                </div>
              </a-col>
            </template>
            <template>
              <div class="knowledge-classification" id="list" style="" v-show="inneryes">
                <a-row :gutter="24">
                  <template>
                    <a-col
                      :md="3"
                      :sm="4"
                      style="float: left;overflow: hidden;"
                      class="knowledge-classification-left"
                    >
                      <p>字母</p>
                    </a-col>
                    <a-col
                      :md="21"
                      :sm="20"
                      style="float: left;overflow: hidden;"
                      class="knowledge-classification-right"
                    >
                      <a
                        v-for="letter in enLetters"
                        :key="letter"
                        :href="`#${letter}${letter}`"
                        v-show="fuzzySearch[letter.toUpperCase()].length"
                      >{{ letter.toUpperCase() }}</a>
                    </a-col>
                  </template>
                </a-row>
              </div>
            </template>
          </a-row>
        </a-form>
      </div>
      <div class="classification-details">
        <div v-show="!inneryes" style="text-align: center;margin-left: -200px">
          <img src="../../assets/images/zhaobudao.png" alt />
        </div>
        <div v-show="inneryes" class="classification-details-inner">
          <div class="classification-details-inner-a" id="aa" v-if="fuzzySearch.A.length != 0">
            <span>A</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.A" :key="l">
              <p>{{l.name}}</p>
              <!-- </router-link> -->
            </li>
          </div>
          <div class="classification-details-inner-a" id="bb" v-if="fuzzySearch.B.length != 0">
            <span>B</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.B" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="cc" v-if="fuzzySearch.C.length != 0">
            <span>C</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.C" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="dd" v-if="fuzzySearch.D.length != 0">
            <span>D</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.D" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="ee" v-if="fuzzySearch.E.length != 0">
            <span>E</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.E" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="ff" v-if="fuzzySearch.F.length != 0">
            <span>F</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.F" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="gg" v-if="fuzzySearch.G.length != 0">
            <span>G</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.G" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="hh" v-if="fuzzySearch.H.length != 0">
            <span>H</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.H" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="jj" v-if="fuzzySearch.J.length != 0">
            <span>J</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.J" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="kk" v-if="fuzzySearch.K.length != 0">
            <span>K</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.K" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="ll" v-if="fuzzySearch.L.length != 0">
            <span>L</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.L" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="mm" v-if="fuzzySearch.M.length != 0">
            <span>M</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.M" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="nn" v-if="fuzzySearch.N.length != 0">
            <span>N</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.N" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="oo" v-if="fuzzySearch.O.length != 0">
            <span>O</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.O" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="pp" v-if="fuzzySearch.P.length != 0">
            <span>P</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.P" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="qq" v-if="fuzzySearch.Q.length != 0">
            <span>Q</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.Q" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="rr" v-if="fuzzySearch.R.length != 0">
            <span>R</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.R" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="ss" v-if="fuzzySearch.S.length != 0">
            <span>S</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.S" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="tt" v-if="fuzzySearch.T.length != 0">
            <span>T</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.T" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="ww" v-if="fuzzySearch.W.length != 0">
            <span>W</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.W" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="xx" v-if="fuzzySearch.X.length != 0">
            <span>X</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.X" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="yy" v-if="fuzzySearch.Y.length != 0">
            <span>Y</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.Y" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
          <div class="classification-details-inner-a" id="zz" v-if="fuzzySearch.Z.length != 0">
            <span>Z</span>
            <li @click="jumpWindow(l.id)" v-for="(l) in fuzzySearch.Z" :key="l">
              <p>{{l.name}}</p>
            </li>
          </div>
        </div>
      </div>
      <company-profile />
    </div>
  </div>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/zkxhKnowledge'
import CompanyProfile from '../../components/knowlage/companyProfile'
import DiseaseKnowledgelist from '../../components/knowlage/diseaseKnowledgelist'
import KnowTopnav from '../../components/knowlage/knowtopnav'
import GlobalLayout from '@/components/page/GlobalLayout'
import Contextmenu from '@/components/menu/Contextmenu'
import { mixin, mixinDevice } from '@/utils/mixin.js'

const indexKey = '/dashboard/analysis'

export default {
  name: 'MedicationRecommendations',
  components: {
    CompanyProfile,
    DiseaseKnowledgelist,
    KnowTopnav,
    GlobalLayout,
    Contextmenu
  },
  //这是用药建议页面
  data() {
    return {
      search: '',
      inneryes: true,
      columns: [],
      searchAll: '',
      detailSearchArr: [],
      fuzzySearch: [],
      i: '',
      dataSource:[],
      categoryIndex: 0,
      enLetters: 'abcdefghjklmnopqrstwxyz',
      selectData: ['zhang', 'li'],
      pageList: [],
      linkList: [],
      modoultouse: '',
      activePage: '',
      menuVisible: false,
      menuItemList: [
        { key: '1', icon: 'arrow-left', text: '关闭左侧' },
        { key: '2', icon: 'arrow-right', text: '关闭右侧' },
        { key: '3', icon: 'close', text: '关闭其它' }
      ],
      // 请求参数
      url: {
        list: '/knowledge/knoCgOwner/getDepAll',
        despist: '/dicts/depsetting/list',
        listseach: '/knowledge/knoCgOwner/list',
        fuzzysearch: '/es/searchFull/getSearchDiseaseOrDrugsAll',
        getSearchSecondLeveList: '/es/searchFull/getSearchSecondLeveList',
        searchDetail: '/es/searchFull/getSearchSecondLeveList',
        querySearchList: '/knowledge/knoCgOwner/querySearchList'
      },
      options: [],
      value: [],
      list: [],
      loading: false,
      states: ['张洪亮']
    }
  },
  created() {
      getAction(this.url.fuzzysearch, { searchName: '科', searchType: 2 }).then(res => {
        if (res.success) {
          this.fuzzySearch = res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        getAction(this.url.list).then(res => {
          if (res.success) {
            this.dataSource = res.result
            //计算科室长度判定盒子高度
            this.listlength = res.result.length
            this.num = Math.ceil(this.listlength / 8)
            // document.querySelector('#list').style.marginTop = 40 + this.num * 30 + 'px'
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      })
  },
  mounted() {
    this.list = this.states.map(item => {
      return { value: `${item}`, label: `${item}` }
    })
  },
  methods: {
    topchengecolor(e) {
      console.log('13213231')
      console.log('"' + '.' + e + '"')
      document.querySelector('"' + '.' + e + '"').style.color = 'cyan'
    },
    jumpWindow(itemId){
      let routeUrl = this.$router.resolve({path:'/knowlage/detail',query:{id: itemId, type: 4}});
      window.open(routeUrl.href, '_blank');
    },
    remoteMethod(query) {
      this.modoultouse = query
      //console.log(this.value)
      getAction(this.url.querySearchList, { searchType: 2, filed: query }).then(res => {
        if (res.success) {
          console.log('8888888888888888888888888')
          console.log(res.result)
          let soon = []
          for (var i = 0; i < res.result.length; i++) {
            soon.push(res.result[i].disname)
          }
          this.states = soon
          console.log(this.states)
          console.log(this.value)
          this.list = this.states.map(item => {
            return { value: `${item}`, label: `${item}` }
          })
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    },
    detailSearch(e) {
      getAction(this.url.searchDetail, { searchId: e, searchType: 2 }).then(res => {
        if (res.success) {
          console.log('5438')
          console.log(res.result)
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    missTime(e) {
      getAction(this.url.fuzzysearch, { searchName: e, searchType: 2 }).then(res => {
        if (res.success) {
          console.log('5438')
          console.log(this.selectData.A)
          this.selectData = res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    searchOne(e) {
      if (this.value.length == 0) {
        this.value = this.modoultouse
        getAction(this.url.fuzzysearch, {
          searchName: '"' + this.value[0] != '' ? this.value[0] : '科' + '"',
          searchType: 2
        }).then(res => {
          if (res.success) {
            this.fuzzySearch = res.result
            this.value = []
            this.modoultouse = ''
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      } else {
        getAction(this.url.fuzzysearch, { searchName: '"' + this.value[0] + '"', searchType: 2 }).then(res => {
          if (res.success) {
            console.log('66666666666666666')
            console.log(this.value)
            this.fuzzySearch = res.result
            this.value = []
            this.modoultouse = ''
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      }
    },
    forSearch(e, index) {
      this.i = index
      getAction(this.url.fuzzysearch, { searchName: e, searchType: 2, feildType: 1 }).then(res => {
        if (res.success) {
          console.log('777777777777777777777')
          console.log(res.result.A.length)
          if (
            res.result.A.length != 0 ||
            res.result.B.length != 0 ||
            res.result.C.length != 0 ||
            res.result.D.length != 0 ||
            res.result.E.length != 0 ||
            res.result.F.length != 0 ||
            res.result.G.length != 0 ||
            res.result.H.length != 0 ||
            res.result.L.length != 0 ||
            res.result.J.length != 0 ||
            res.result.K.length != 0 ||
            res.result.M.length != 0 ||
            res.result.N.length != 0 ||
            res.result.O.length != 0 ||
            res.result.P.length != 0 ||
            res.result.Q.length != 0 ||
            res.result.R.length != 0 ||
            res.result.S.length != 0 ||
            res.result.T.length != 0 ||
            res.result.W.length != 0 ||
            res.result.X.length != 0 ||
            res.result.Y.length != 0 ||
            res.result.Z.length != 0
          ) {
            this.inneryes = true
            this.fuzzySearch = res.result
            document.querySelector('.knowledge-details').style.borderBottom = '1px dashed #ebeef5'
          } else {
            this.inneryes = false
            document.querySelector('.knowledge-details').style.borderBottom = '1px solid #ebeef5'
          }
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    handleChange(value) {
      console.log(`selected ${value}`)
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/knowledge.less';

.btn {
  border: none;
  background-color: #fff;
}

//input获取焦点，border专用
.inp:focus {
  border: 1px solid #38c3c8;
}
.inp:hover {
  border: 1px solid #38c3c8;
}
.inp::selection {
  background-color: #38c3c8;
  color: #fff;
}

</style>